<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>BC显示</title>
    <meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <!--标准mui.css-->
    <link rel="stylesheet" href="css/mui.min.css">
    <!--App自定义的css-->
    <link rel="stylesheet" type="text/css" href="css/app.css"/>

    <link href="css/mui.picker.css" rel="stylesheet" />
    <link href="css/mui.poppicker.css" rel="stylesheet" />
    <link href="css/baiyi.css" rel="stylesheet">
    <script src="js/angular.min.js"></script>
</head>

<body ng-app="homePage" ng-controller="hpCtrl">

<nav class="mui-bar mui-bar-tab">
    <a class="mui-tab-item mui-active">
        <span class="mui-icon mui-icon-home"></span>
        <span class="mui-tab-label">首页</span>
    </a>
    <a class="mui-tab-item" href="quotation.html">
        <span class="mui-icon mui-icon-compose"></span>
        <span class="mui-tab-label">报价单</span>
    </a>
    <a class="mui-tab-item" href="steelStruct.html">
        <span class="mui-icon mui-icon-settings"></span>
        <span class="mui-tab-label">钢结构图纸</span>
    </a>
    <a class="mui-tab-item" href="dRendering.html">
        <span class="mui-icon mui-icon-starhalf"></span>
        <span class="mui-tab-label">动态效果</span>
    </a>
    <a class="mui-tab-item" href="personalCenter.html">
        <span class="mui-icon mui-icon-contact"></span>
        <span class="mui-tab-label">个人中心</span>
    </a>
</nav>

<div class="mui-content">

    <div id="mainPage" class="mui-control-content mui-active">
        <header class="mui-bar mui-bar-nav">
            <img style="margin-top: 4px" class="mui-pull-left" src="img/baiyi.png">
            <!--<a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>-->
            <h1 class="mui-title">BC显示</h1>
            <a class="mui-pull-right headA" href="personalCenter.html">个人中心</a>
        </header>

        <div class="mui-content-padded">
            <div class="headMarginTop"></div>

            <div class="borderTopBottom">
                <h5 class="mui-content-padded">请您选择产品型号</h5>
                <select id="modelSelect" ng-model="modelId" ng-options="model.id as model.name for model in models"></select>
            </div>

            <div class="borderBottom paddingTop">
                <h5 class="mui-content-padded">宽度：<span id='block-range-width-val' ng-bind="width"></span></h5>
                <div class="mui-input-range mui-content-padded">
                    <input type="range" class="range" id='block-range-width' value="{{width}}" ng-model="width" min="0" max="50" >
                </div>
            </div>

            <div class="borderBottom paddingTop">
                <h5 class="mui-content-padded">高度：<span id='block-range-height-val' ng-bind="height"></span></h5>
                <div class="mui-input-range mui-content-padded">
                    <input type="range" class="range" id='block-range-height' value="{{height}}" min="0" max="50" ng-model="height">
                </div>
            </div>
        </div>

        <!--<div class="footerButton">
            <button type="button" class="mui-btn mui-btn-primary myButtonBlock" ng-click="generate()">生成</button>
        </div>-->
    </div>

</div>

</body>
<script src="js/mui.min.js"></script>
<script src="globalVar.js"></script>
<script>

        mui.init({
            swipeBack: false //启用右滑关闭功能
        });

        var app = angular.module('homePage', []);
        app.controller('hpCtrl', function($scope,$http) {
            $scope.width = "";
            $scope.height = "";
            $scope.modelId = "";
            $scope.models = "";
            $scope.token = "";

            var width = localStorage.getItem("width");
            var height = localStorage.getItem("height");
            var modelId = localStorage.getItem("modelId");
            console.log(localStorage.getItem("modelName"));
            console.log(localStorage.getItem("modelId"));

            if (width === null) {
                $scope.width = 5;
            } else {
                $scope.width = width;
            }
            if (height === null) {
                $scope.height = 5;
            } else {
                $scope.height = height;
            }

            if (modelId === null || modelId.length === 0){
                $scope.modelId = 1;
            }

            $scope.token = localStorage.getItem("token");

            $http({
                method: "GET",
                url: url + "/product/types?token="+$scope.token,
            }).then(
                function success(response) {
                    $scope.models = response.data.obj;
                    if (modelId == null || modelId.length === 0){
                        $scope.modelId = 1;
                    }else {
                        $scope.modelId = parseInt(modelId);
                    }
                },
                function error(response) {
                    location.href = "login.html";
                }
            );


           /* $scope.generate = function () {
               /!* console.log($scope.models[$scope.modelId-1]);*!/
                localStorage.setItem("modelName", $scope.models[$scope.modelId-1].name);
                localStorage.setItem("modelId", $scope.models[$scope.modelId-1].id);
                localStorage.setItem("width", $scope.width);
                localStorage.setItem("height", $scope.height);
            };*/



            /*document.getElementById("block-range-height").addEventListener('input',function(){
                console.log($scope.height);
                $scope.generate();
            });

            document.getElementById("block-range-width").addEventListener('input',function(){
                console.log($scope.width);
                $scope.generate();
            });

            document.getElementById("modelSelect").onchange = function(){
                console.log($scope.modelId);
                $scope.generate();
            }*/
            setInterval(function () {
                localStorage.setItem("modelName", $scope.models[$scope.modelId-1].name);
                localStorage.setItem("modelId", $scope.models[$scope.modelId-1].id);
                localStorage.setItem("width", $scope.width);
                localStorage.setItem("height", $scope.height);
            },500);
        });

        mui('body').on('click','nav a',function(){document.location.href=this.href;});

</script>
</html>